<template>
  <div class="VR-scene-list-container">
     <!-- 
    1.public index.html删除样式文件
    2.卸载依赖
    3.删除系统路由 
    4.注意全局样式，如全选分页器，场景列表样式
  -->
    <div class="title">
      VR场景列表
      <el-button type="primary" @click="handleAddScene" style="margin-left:10px">新增</el-button>
      <!-- <el-button type="primary" @click="handleSceneTypeEidt" style="margin-left:10px">编辑分类</el-button> -->
      <el-button type="primary" @click="handleSave" style="margin-left:10px">保存</el-button>
      <el-button type="primary" @click="handleReset" style="margin-left:10px">重置数据</el-button>
      <el-button type="primary" @click="handlePreview()" style="margin-left:10px">预览</el-button>
      <el-button type="primary" @click="handlelog()" style="margin-left:10px">调试</el-button>
    </div>
    <div class="search-params">
      <el-form ref="searchFomrRef" :model="queryData" label-position="left" class="search-demo-form-inline" label-width="70px">
          <el-row :gutter="20">
              <el-col :span="12">
                  <el-form-item label="关键词" class="keywords-search">
                        <el-input v-model="queryData.keywords" placeholder="输入关键词">
                            <template #suffix>
                                <i class="iconfont" @click="handleSearch">&#xe643;</i>
                            </template>
                        </el-input>
                      <!-- <el-button class="search-icon" type="primary" link @click="handleSearch"><el-icon><Search /></el-icon></el-button> -->
                  </el-form-item>
              </el-col>
          </el-row>
          <el-row :gutter="20">
              <el-col :span="6">
                  <el-form-item label="场景分类">
                    <el-tree-select
                      v-model="queryData.typeId"
                      placeholder="选择所属上级场景"
                      :filter-node-method="filterNodeMethod"
                      filterable
                      :data="tableDataTree"
                      default-expand-all
                      :props="menuTreeSelectProps"
                      :check-strictly="true"
                      @change="handleCurFormSceneTypeChange"
                    >
                      <template #default="{ data }">
                        <div class="custom-tree-node">
                          <span>{{ data.title }}</span>
                          <i class="iconfont icon-xiugai" @click="handleSceneTypeFormEdit(data)"></i>
                          <!-- <el-dropdown>
                            <div class="btns">
                              <i class="iconfont icon-a-gengduo7"></i>
                            </div>
                                <template #dropdown>
                                    <el-dropdown-menu>
                                        <el-dropdown-item @click="handleSceneTypeFormEdit(data)"><i class="iconfont icon-xiugai">编辑</i></el-dropdown-item>
                                        <el-dropdown-item @click="handleSceneTypeFormDelete(item)"><i class="iconfont icon-shanchu">删除</i></el-dropdown-item>
                                    </el-dropdown-menu>
                                </template>
                          </el-dropdown> -->
                        </div>
                      </template>
                    </el-tree-select>
                  </el-form-item>
              </el-col>
              <el-col :span="6">
                  <el-form-item label="场景状态">
                      <el-select v-model="queryData.status" placeholder="请选择">
                        <el-option
                          v-for="item in statusOptions"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value"
                        />
                      </el-select>
                  </el-form-item>
              </el-col>
              <el-col :span="6">
                  <el-form-item label="发布时间">
                      <el-date-picker
                          v-model="queryData.publishTime"
                          type="datetimerange"
                          range-separator="至"
                          start-placeholder="编辑时间"
                          end-placeholder="编辑时间"
                          format="YYYY-MM-DD HH:mm:ss"
                          value-format="YYYY-MM-DD HH:mm:ss"
                          :unlink-panels="true"
                      />
                  </el-form-item>
              </el-col>
          </el-row>
      </el-form>
      <div class="bottom-btn">
          <div class="left-btn">
            <el-button type="primary" @click="handleSearh">搜索</el-button>
            <el-button @click="reset">重置</el-button>
          </div>
      </div>
    </div>
    <!-- 头部分页器 -->
    <div class="header-page">
        <PaginationView
        :total="queryData.total"
        :pageSize="queryData.pageSize"
        :currentPage="queryData.currentPage"
        :options="queryData.options"
        :allChoose="isAllChooseBtn"
        :pageChoose="isPageChooseBtn"
        :checkedNum="checkedNum"
        @checkOption="handleOption"
        @changeSize="handleSizeChange"
        @currentChange="handleCurrentChange"
        @changePageChoose="handlePageChoose"
        @changeAllChoose="handleAllChoose"
        @invertChoose="handleInvertChoose"
        style="border-top: none"
        @cancelChoose="clearChoose"
        @refreshList="getTableList"
        />
    </div>
    <div class="section-list">
      <div class="ruifox-list" v-loading="tableLoading">
        <Transition name="table" mode="out-in">
          <div class="wechat-card-box wechat-card-table">
              <div
                  class="wechat-card"
                  :class="{'card-focus': element.id === showCardOptions.id && showCardOptions.show}"
                  v-for="(element) in tableData"
                  :key="element.id"
                  @mouseenter="showOptions(element.id)"
                  @mouseleave="closeOptions()"
              > 
                  <div class="wechat-card-sn">
                      <div class="card-checkbox" v-show="element.id === showCardOptions.id && showCardOptions.show || element.checked">
                          <el-checkbox class="unmover" v-model="element.checked" @change="handleCheckTable(element.id)" size="large"/>
                      </div>
                  </div>
                  <div class="wechat-thumb">
                      <img :src="element.thumbUrl || element.VRImg" alt="">
                  </div>
                  <div class="wechat-card-title">
                      <div class="card-title-top">
                          <div class="card-title-btn-box">
                              <span class="model-tip">
                                  <i class="iconfont" :class="element.model_icon"></i>
                              </span>
                          </div>
                          <p :title="element.title.replace(/<[^>]+>/g,'')" class="unmover">
                              <a href="javascript:;">{{element.title.replace(/<[^>]+>/g,"")}}</a>
                          </p>
                      </div>
                      <div class="card-title-bottom">
                          <div class="title-tips">
                              <span v-if="element.publishTime" title="发布时间" ><i class="iconfont">&#xe6f0;</i> {{element.publishTime}}</span>
                              <span v-if="element.comefrom" title="来源部门"><i class="iconfont">&#xe6e1;</i> {{element.comefrom}}</span>
                              <span v-if="element.author" title="作者"><i class="iconfont">&#xe6e3;</i> {{element.author}}</span>
                          </div>
                          <div class="tags-platform">
                              <!-- 标签 -->
                              <div class="tags">
                                  
                              </div>
                              <template v-for="(item,aindex) in element.platform" :key="aindex">
                                  <span :title="citem" v-for="(citem,cindex) in item.mediaList" :key="cindex">
                                      <i class="iconfont wechat" v-if="item.media == 'wechat'">&#xe6b8;</i>
                                  </span>
                              </template>
                          </div>
                      </div>
                  </div>
                  <Transition name="options">
                      <div class="ruifox-card-options unmover" v-show="element.id === showCardOptions.id && showCardOptions.show">
                          <div class="inner-card-options" v-if="element.id === showCardOptions.id">
                              <el-button class="option-btn" text size="small" @click="handleEdit(element)">
                                  <i class="iconfont">&#xe6e6;</i>
                                  编辑
                              </el-button>
                              <el-button class="option-btn" text size="small" @click="handleSetting(element)">
                                  <i class="iconfont">&#xe6e6;</i>
                                  配置
                              </el-button>
                              <el-dropdown> 
                                  <el-button class="more-btn" text size="small">
                                      <i class="iconfont">&#xe6dc;</i>
                                  </el-button>
                                  <template #dropdown>
                                      <el-dropdown-menu>
                                          <el-dropdown-item type="primary" plain size="small" @click="handlePreview(element)">
                                              <i class="iconfont">&#xe6ed;</i>预览
                                          </el-dropdown-item>
                                          <el-dropdown-item type="primary" plain size="small" @click="handleDeleteScene(element)">
                                              <i class="iconfont">&#xe6ed;</i>删除
                                          </el-dropdown-item>
                                      </el-dropdown-menu>
                                  </template>
                              </el-dropdown>
                          </div>
                      </div>
                  </Transition>
              </div>
              <!-- 防止justify-content: space-between; -->
              <div style="width: calc((100% - 30px) / 3); height: 0" v-for="n in 3" :key="n"></div>
          </div>
        </Transition>
        <template v-if="tableData.length === 0">
          <div class="no-data">
            <i class="iconfont">&#xe642;</i>
            <span>暂无数据</span>
          </div>
        </template>
      </div>
    </div>
    <div class="footer">
        <PaginationView
            :total="queryData.total"
            :pageSize="queryData.pageSize"
            :currentPage="queryData.currentPage"
            :options="queryData.options"
            :allChoose="isAllChooseBtn"
            :pageChoose="isPageChooseBtn"
            :checkedNum="checkedNum"
            @checkOption="handleOption"
            @changeSize="handleSizeChange"
            @currentChange="handleCurrentChange"
            @changePageChoose="handlePageChoose"
            @changeAllChoose="handleAllChoose"
            @invertChoose="handleInvertChoose"
            style="border-top: none"
            @cancelChoose="clearChoose"
            @refreshList="getTableList"
        />
    </div>
    <!-- 编辑场景信息弹框 -->
    <el-dialog
      v-model="showSceneDialog"
      :title="sceneTitle"
      width="750px"
      align-center
    >
      <el-form :model="sceneForm" ref="sceneEditFormRef" :rules="sceneEditRules" label-width="120px" class="scene-edit-form">
        <el-form-item label="上级场景:" prop="pid">
          <el-tree-select
              v-model="sceneForm.pid"
              placeholder="选择所属上级场景"
              :filter-node-method="filterNodeMethod"
              filterable
              :data="tableDataTree"
              default-expand-all
              :props="menuTreeSelectProps"
              :check-strictly="true"
          ></el-tree-select>
        </el-form-item>
        <el-form-item label="场景名称:" prop="title">
          <el-input v-model="sceneForm.title" placeholder="请输入标题"/>
        </el-form-item>
        <el-form-item label="场景描述:">
          <el-input v-model="sceneForm.description" type="textarea" placeholder="请输入描述" />
        </el-form-item>
        <template v-if="sceneForm.type == 2">
          <!-- VRImg -->
          <el-form-item label="VR场景图:" prop="">
            <div class="VR-ico-box">
              <div class="VR-ico" v-if="sceneForm.VRImg">
                <img :src="sceneForm.VRImg" alt="">
                <div class="icon-box" @click="handleFileDelete(sceneForm,'VRImg')"><i class="iconfont">&#xe74b;</i></div>
              </div>
              <el-button link type="primary" v-if="sceneForm.VRImg" @click="handleUploadImg('VRImg')">重新上传</el-button>
              <el-button size="small" v-else @click="handleUploadImg('VRImg')">上传图片</el-button>
            </div>
          </el-form-item>
          <el-form-item>
            <template #label>
              <div class="slot-label">封面图
                <PopoverTip :content="'若不设置，将以“VR场景图”作封面图'"/>:
              </div>
            </template>
            <div class="VR-ico-box">
              <div class="VR-ico" v-if="sceneForm.thumbUrl">
                <img :src="sceneForm.thumbUrl" alt="">
                <div class="icon-box" @click="handleFileDelete(sceneForm,'thumbUrl')"><i class="iconfont">&#xe74b;</i></div>
              </div>
              <el-button link type="primary" v-if="sceneForm.thumbUrl" @click="handleUploadImg('thumbUrl')">重新上传</el-button>
              <el-button size="small" v-else @click="handleUploadImg('thumbUrl')">上传图片</el-button>
            </div>
          </el-form-item>
          <el-form-item label="背景音乐:">
            <div class="VR-audio-box">
              <div class="VR-audio" v-if="sceneForm.bgsound">
                <audio controls ref="audio" class="aud">
                  <source :src="sceneForm.bgsound" />
                </audio>
                <div class="icon-box" @click="handleFileDelete(sceneForm,'bgsound')"><i class="iconfont">&#xe74b;</i></div>
              </div>
              <el-button link type="primary" v-if="sceneForm.bgsound" @click="handleUploadAudio()">重新上传</el-button>
              <el-button size="small" v-else @click="handleUploadAudio()">上传mp3</el-button>
            </div>
          </el-form-item>
        </template>
        <el-form-item label="是否启用:">
          <el-switch v-model="sceneForm.status" :active-value="1" :inactive-value="0"/>
        </el-form-item>
        <el-form-item label="场景类型:" prop="type">
          <el-radio-group v-model="sceneForm.type">
            <el-radio :label="1" border :disabled="sceneForm.id != undefined">场景分类</el-radio>
            <el-radio :label="2" border :disabled="sceneForm.id != undefined" style="margin-left: 10px">场景页面</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="showSceneDialog = false">取消</el-button>
          <el-button type="primary" @click="handleSceneFormSubmit(sceneEditFormRef)">确定</el-button>
        </span>
      </template>
    </el-dialog>
    <!-- 场景分类修改弹框 -->
    <el-dialog
      v-model="showSceneTypeEditDialog"
      title="编辑"
      width="750px"
    >
      <el-form :model="sceneTypeForm" ref="sceneTypeFormRef" :rules="sceneEditRules" label-width="120px" class="scene-edit-form">
        <!-- <el-form-item label="当前分类:">
          <el-tree-select
              v-model="queryData.typeId"
              placeholder="选择所属上级场景"
              :filter-node-method="filterNodeMethod"
              filterable
              :data="tableDataTree"
              default-expand-all
              :props="menuTreeSelectProps"
              :check-strictly="true"
              @change="handleSceneTypeChange"
          ></el-tree-select>
        </el-form-item> -->
        <el-form-item label="场景名称:" prop="title">
          <el-input v-model="sceneTypeForm.title" placeholder="请输入标题"/>
        </el-form-item>
        <el-form-item label="场景描述:">
          <el-input v-model="sceneTypeForm.description" type="textarea" placeholder="请输入描述" />
        </el-form-item>
        <el-form-item label="是否启用:">
          <el-switch v-model="sceneTypeForm.status" :active-value="1" :inactive-value="0"/>
        </el-form-item>
        <el-form-item label="场景类型:" prop="type">
          <el-radio-group v-model="sceneTypeForm.type">
            <el-radio :label="1" border >场景分类</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button type="danger" @click="handleSceneTypeDelete()">删除</el-button>
          <el-button @click="showSceneTypeEditDialog = false">取消</el-button>
          <el-button type="primary" @click="handleSceneTypeFormSubmit(sceneTypeFormRef)">确定</el-button>
        </span>
      </template>
    </el-dialog>
    <ImageUpload v-if="showImgUpload" v-model:showDialog="showImgUpload" :limit="1" @getImage="getImage"></ImageUpload>
    <AudioUpload v-if="showAudioUpload" v-model:showDialog="showAudioUpload" :limit="1" @getAudio="getAudio"></AudioUpload>
  </div>
</template>
<script setup>
import { ref, reactive, watch, computed } from 'vue'
import { myDebounce } from "@/utils/tools";
import { useRouter } from "vue-router"
import { ElMessage, ElMessageBox } from 'element-plus'
import { useStore } from 'vuex'
import testData from "./test2"
import { getSceneList, addScene, editScene, deleteSceneByIds } from '@/api/VR'

const store = useStore()
const router = useRouter()
const menuTreeSelectProps = {
  children: 'children',
  label: 'title',
  value: 'id',
}
const statusOptions = ref([
  { label: '已启用', value: 1 },
  { label: '已停用', value: 2 },
])
const defaultQueryData = {
  total:0,
  pageSize: 10,
  currentPage: 1,
  isAll: false, //是否查全部（不分页）
  keywords: '', //关键词
  publishTime: [], //发布时间
  status: 1, //场景状态 0未启用 1已启用
  typeId: 0, //场景分类id，查询当前分类及下面的所有场景图,不传或传0则查全部
  options: [
      {
        name: '删除',
        icon: '&#xe74b;',
        value: 1
      },
      {
        name: '禁用',
        icon: '&#xe6ea;',
        value: 2
      },
      {
        name: '启用',
        icon: '&#xe6ea;',
        value: 3
      },
  ],
}
// 分页参数
const queryData = reactive(Object.assign({},defaultQueryData))
const tableDataTree = ref(testData)
const tableData = ref([])
const defualtSceneTypeForm = { //场景分类字段
  pid: '',
  title: "", //标题
  type: 1, //1场景分类 2场景页面
  sceneList: [], //场景图列表
  thumbUrl: "", // 封面图
  status: 1, //状态 0未启用 1已启用
  children: []
}
const defualtSceneForm = { //场景图字段
  pid: null,
  type: 2, //1场景分类 2场景页面
  title: '', //标题
  description: '', //描述
  status: 1, //状态 0未启用 1已启用
  thumbUrl: '', //封面图
  logo: '', //场景logo
  VRImg: '', //VR图
  publishTime: '', //发布时间
  author: '', //发布人
  bgsound: '', //背景音乐
  markerList: [], //锚点列表
  isFirst: false, //是否作为首图
}
const sceneForm = ref({})

// 获取树形数据
const getVRTree = async () => {
  tableDataTree.value = store.getters.VRTree
  store.dispatch('VR/handleGetVRtree').then(() => {
    tableDataTree.value = store.getters.VRTree
  })
}

// 获取场景图列表
const tableLoading = ref(false)
const getTableList = async () => {
  tableLoading.value = true
  let res = await getSceneList(queryData).finally(()=>{
    tableLoading.value = false
  }) 
  tableData.value = res.data.list
  queryData.total = tableData.value.length
}

// VR初始化
const init = () => {
  getVRTree()
  getTableList()
  //查询所有场景图列表
  tableData.value = store.getters.VRList
  store.dispatch('VR/handleGetVRList', {isAll: true}).then(()=>{
    tableData.value = store.getters.VRList
  })
}
init()

// 选择场景类型 获取场景页面
const handleCurFormSceneTypeChange = () => {
  tableData.value = []
  getTableList()
}

// 搜索
const handleSearh = () => {
  queryData.currentPage = 1
  getTableList()
}
// 删除分类
const handleSceneTypeDelete = () => {
  ElMessageBox.confirm(
      `<div><p style="font-size: 14px;">是否确认删除“${sceneTypeForm.value.title}”？</p></div>`,
      '提示',
      {
        dangerouslyUseHTMLString: true,
        confirmButtonText: '确认',
        cancelButtonText: '取消',
      }
  ).then(() => {
    if(queryData?.id){
      deepDeleteSceneTypeById(tableDataTree.value, queryData.typeId)
      queryData.typeId = '0' //初始化场景分类条件
      ElMessage({
        message: "删除成功",
        type: "success",
      })
      showSceneTypeEditDialog.value = false
    }
  })
}
// 根据id递归查找删除
const deepDeleteSceneTypeById = (arr, id) => {
  for (let index = 0; index < arr.length; index++) {
    const element = arr[index];
    if(element.id == id){
      arr.splice(index, 1)
    }else if(element.children?.length){
      deepDeleteSceneTypeById(element.children, id)
    }
  }
}
// 重置
const reset = () => {
  Object.assign(queryData,defaultQueryData)
  handleSearh()
}
// 添加场景
const sceneTitle = ref('添加')
const showSceneDialog = ref(false)
const handleAddScene = () => {

  sceneForm.value = structuredClone(defualtSceneForm)
  showSceneDialog.value = true
}
const showCardOptions = reactive({
  id: 0,
  show: false,
})
const _showOptions = (id) => {
  if(store.getters.isScroll) return
  showCardOptions.id = id
  showCardOptions.show = true
}
const showOptions = myDebounce(_showOptions, 70)
const _closeOptions = () => {
  showCardOptions.show = false
}
const closeOptions = myDebounce(_closeOptions, 20)

// 编辑
const handleEdit = (row) => {
  sceneForm.value = structuredClone(row)
  sceneForm.value = row
  showSceneDialog.value = true
}

const sceneEditFormRef = ref()
const sceneEditRules = ref({
  pid: [{ required: true, message: '请选择上级场景', trigger: 'blur', }],
  title: [{ required: true, message: '请输入标题', trigger: 'blur' }],
  VRImg: [{ required: true, message: '请上传场景图', trigger: 'blur' }],
})
// 表单提交
const handleSceneFormSubmit = async (formEl) => {
  if (!formEl) return
  await formEl.validate(async (valid) => {
    if (valid) {
      if(sceneForm.value.id != undefined){ //编辑
        let res = await editScene(sceneForm.value)
        if(res.code == 20000){
          ElMessage({
            message: "操作成功",
            type: "success",
          })
        }
      }else{//添加
        let res = await addScene(sceneForm.value)
        if(res.code == 20000){
          ElMessage({
            message: "操作成功",
            type: "success",
          })
        }
      }
      init()
      showSceneDialog.value = false
    }
  })
}
// 根据pid递归获取场景类型信息
const curScene = ref()
const deepGetSceneTypeByPid = (arr, id) => {
  for (let index = 0; index < arr.length; index++) {
    let item = arr[index];
    if(item.id == id){
      curScene.value = item
      return
    }else if(item.children?.length > 0){
      deepGetSceneTypeByPid(item.children, id)
    }
  }
}
// 删除场景
const handleDeleteScene = (row) => {
  ElMessageBox.confirm(
      '<div><p style="font-size: 14px;">是否确认删除？</p></div>',
      '提示',
      {
        dangerouslyUseHTMLString: true,
        confirmButtonText: '确认',
        cancelButtonText: '取消',
      }
  ).then(async () => {
    let ids, isAllChoose
    if(row){
      ids = [row.id]
      isAllChoose = false
    }else{
      ids = CheckedList.value
      isAllChoose = isAllSearch.value
    }
    console.log('ids',ids,isAllChoose);
    let res = await deleteSceneByIds({ids,isAllChoose})
    if(res.code == 20000){
      ElMessage({
        message: "删除成功",
        type: "success",
      })
    }
  })
}
// 配置
const handleSetting = (row) => {
  console.log(row);
  router.push({
    path: '/content/VR/VRSetting',
    query: {
      sceneId: row.id,
    }
  })
}
// 预览
const handlePreview = (row) => {
  if(row){
    router.push({path: '/content/VR/VRPreview', query:{sceneId: row.id}})
  }else{
    router.push({path: '/content/VR/VRPreview'})
  }
}
const handlelog = () => {
  console.log('data',tableDataTree.value);
}
// 上传图片
const showImgUpload = ref(false)   
const curImgType = ref('')
const handleUploadImg = (type) => {
  curImgType.value = type
  showImgUpload.value = true
}
const getImage = (data) => {
  sceneForm.value[curImgType.value] = data[0].url
} 
// 上传音频
const showAudioUpload = ref(false)   
const handleUploadAudio = () => {
  showAudioUpload.value = true
}
const getAudio = (data) => {
  sceneForm.value.bgsound = data[0].url
} 
// 删除图片
const handleFileDelete = (form, key) => {
  
  ElMessageBox.confirm(
      '<div><p style="font-size: 14px;">是否确认删除？</p></div>',
      '提示',
      {
        dangerouslyUseHTMLString: true,
        confirmButtonText: '确认',
        cancelButtonText: '取消',
      }
  ).then(() => {
    form[key] = ''
  })
}
const handleSave = () => {
  localStorage.setItem('test-VR-tree', JSON.stringify(tableDataTree.value))
  ElMessage({
    message: "已保存",
    type: "success",
  })
}
const handleReset = () => {
  ElMessageBox.confirm(
      '<div><p style="font-size: 14px;">是否确认重置？</p></div>',
      '提示',
      {
        dangerouslyUseHTMLString: true,
        confirmButtonText: '确认',
        cancelButtonText: '取消',
      }
  ).then(() => {
    localStorage.removeItem('test-VR-tree')
    getTableList()
    ElMessage({
      message: "已重置",
      type: "success",
    })
    localStorage.setItem('test-VR-tree', JSON.stringify(tableDataTree.value))
  })
}
// 场景分类对条件进行筛选
const filterNodeMethod = (value, data) => data.title.includes(value)
// 编辑场景分类
const showSceneTypeEditDialog = ref(false)
const sceneTypeForm = ref(JSON.parse(JSON.stringify(defualtSceneTypeForm)))
const sceneTypeFormRef = ref()
// 编辑场景分类
const handleSceneTypeFormEdit = (data) => {
  deepGetSceneTypeByPid(tableDataTree.value, data.id)
  sceneTypeForm.value = curScene.value
  showSceneTypeEditDialog.value = true
}
const handleSceneTypeFormSubmit = async (formEl) => {
  if (!formEl) return
  await formEl.validate((valid) => {
    if (valid) {
      showSceneTypeEditDialog.value = false
      ElMessage({
        message: "操作成功",
        type: "success",
      })
    }
  })
}
/******************分页器start********************/
// 页数修改
const handleCurrentChange = (page) => {
  queryData.currentPage = page
  getTableList()

}
const handleSizeChange = (size) => {
  queryData.pageSize = size
  getTableList()
}
// 此页全选
const handlePageChoose = (val) => {
  if((val && !isAllSearch.value) || (!val && isAllSearch.value)){
    tableData.value.forEach(item => {
      CheckedList.value.push(item.id)
    })
    // 去重
    CheckedList.value = [...new Set(CheckedList.value)]
  }else{
    tableData.value.forEach(item => {
      if(CheckedList.value.indexOf(item.id) !== -1){
        CheckedList.value.splice(CheckedList.value.indexOf(item.id),1)
      }
    })
  }
}

const handleCheckTable = (id) => {
  if(CheckedList.value.indexOf(id) !== -1){
    CheckedList.value.splice(CheckedList.value.indexOf(id),1)
  }else{
    CheckedList.value.push(id)
  }
  if(process.env.NODE_ENV === 'development') console.log(CheckedList.value)
}
// 选中条数
const checkedNum = ref(0)
// 选中列表
const CheckedList = ref([])
// 是否全选
const isAllSearch = ref(false)
watch(CheckedList,() => {
    tableData.value = tableData.value.map(ele => {
    if((CheckedList.value.includes(ele.id) && !isAllSearch.value) || (!CheckedList.value.includes(ele.id) && isAllSearch.value)){
      ele.checked = true
    }else{
      ele.checked = false
    }
    return ele
  })
  checkedNum.value = isAllSearch.value ? queryData.total - CheckedList.value.length : CheckedList.value.length
},{deep:true})
watch(isAllSearch,() => {
    tableData.value = tableData.value.map(ele => {
    if((CheckedList.value.includes(ele.id) && !isAllSearch.value) || (!CheckedList.value.includes(ele.id) && isAllSearch.value)){
      ele.checked = true
    }else{
      ele.checked = false
    }
    return ele
  })
  checkedNum.value = isAllSearch.value ? queryData.total - CheckedList.value.length : CheckedList.value.length
},{deep:true})
// 全选按钮
const isAllChooseBtn = computed(() => {
  return (isAllSearch.value && CheckedList.value.length === 0) || (!isAllSearch.value && CheckedList.value.length >= queryData.total && queryData.total !== 0)
})
// 此页全选按钮
const isPageChooseBtn = computed(() => {
  //为全选时：数组中不存在并且全选状态，此页数据全在并且不是全选
  if(isAllSearch.value){
    return tableData.value.every(item => CheckedList.value.indexOf(item.id) === -1)
  }else{
    return  CheckedList.value.length === 0 ? false : tableData.value.every(item => CheckedList.value.indexOf(item.id) !== -1)
  }
})
// 切换全选
const handleAllChoose = () => {
  if(CheckedList.value.length === 0 && isAllSearch.value){
    isAllSearch.value = false
  }else{
    CheckedList.value = []
    isAllSearch.value = true
  }
}
//反选
const handleInvertChoose = () => {
  isAllSearch.value = !isAllSearch.value
  if(process.env.NODE_ENV === 'development') console.log(isAllChooseBtn.value)
}
// 清空所有选择
const clearChoose = () => {
    CheckedList.value = []
    isAllSearch.value = false
}
/******************分页器end********************/
// 自定义操作类型
const handleOption = (val) => {
    switch (val) {
    case 1:
        handleDeleteScene()
        break;
    }
}
</script>
<style scoped lang='scss'>
.VR-scene-list-container{
  box-sizing: border-box;
  background-color: #fff;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
  border-radius: 5px;
  padding: 20px 20px;
  .title{
    font-size: 18px;
    font-weight: bold;
    margin-right: 20px;
    margin-bottom: 20px;
  }
  .bottom-btn{
    margin-bottom: 20px;
  }
  .scene-edit-form{
    width: 100%;
    .VR-ico-box{
      display: flex;
      justify-content: flex-start;
      align-items: flex-start;
      flex-direction: column;
      .VR-ico{
        height: 150px;
        margin-right: 5px;
        position: relative;
        img{
          height: 100%;
        }
        .icon-box{
          position: absolute;
          width: 20px;
          height: 20px;
          display: flex;
          justify-content: center;
          align-items: center;
          top: 3px;
          right: 3px;
          background: $failColor;
          padding: 3px 2px;
          border-radius: 2px;
          visibility: hidden;
          cursor: pointer;
          i{
            font-size: 16px;
            color: #fff;
          }
        }
      }
      &:hover{
        .VR-ico{
          .icon-box{
            visibility: inherit;
          }
        }
      }
    }
    .VR-audio-box{
      display: flex;
      justify-content: flex-start;
      align-items: flex-start;
      flex-direction: column;
      .VR-audio{
        margin-right: 5px;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        .icon-box{
          width: 20px;
          height: 20px;
          display: flex;
          justify-content: center;
          align-items: center;
          background: $failColor;
          padding: 3px 2px;
          border-radius: 2px;
          cursor: pointer;
          margin-left: 10px;
          visibility: hidden;
          i{
            font-size: 16px;
            color: #fff;
          }
        }
        &:hover{
          .icon-box{
            visibility: inherit;
          }
        }
      }
    }
  }
}
.section-list{
  .wechat-card-box{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    min-width: 1000px;
    .wechat-card{
      width: calc((100% - 30px) / 3);
      margin-top: 10px;
    }
  }
}
.slot-label{
  display: flex;
  justify-content: center;
  align-items: center;
}
.el-tree-node{
  .custom-tree-node{
    position: relative;
    i{
      position: absolute;
      top: 0;
      right: -16px;
      font-size: 16px;
      color: $mainColor;
      visibility: hidden;
    }
    &:hover{
      i{
        visibility: initial;
      }
    }
  }
}
</style>